
wbx.grid.menu = ((w) => {
  // import
  let createDomByTagName;

  const dom = {
    menu: null
  };

  const state = {
    isColumn: false
  };

  const setConfig = () => {
    createDomByTagName = wbx.util.createDomByTagName;
  };

  const render = (container) => {
    const menu = createDomByTagName('div');
    menu.classList.add('grid-menu');
    const htmlStr = `
      <ul>
        <li class="grid-menu-insert"><a class="grid-menu-insert">插入</a></li>
        <li class="grid-menu-delete"><a class="grid-menu-delete">删除</a></li>
      </ul>
    `;
    menu.innerHTML = htmlStr;
    container.appendChild(menu);

    // add events
    menu.onclick = onMenuClick;

    return menu;
  };

  // events
  const onMenuClick = (e) => {
    const target = e.target;
    if (state.isColumn) {
      console.log(wbx.grid.getSelectedColumnIndex());
      if (target.classList.contains('grid-menu-insert')) {
        wbx.grid.insertOneColumn(wbx.grid.getSelectedColumnIndex());
      } else if (target.classList.contains('grid-menu-delete')) {
        wbx.grid.deleteOneColumn(wbx.grid.getSelectedColumnIndex());
      }
    } else {
      if (target.classList.contains('grid-menu-insert')) {
        // console.log(this.selectedRowIndex);
        wbx.grid.insertOneRow(wbx.grid.getSelectedRowIndex());
      } else if (target.classList.contains('grid-menu-delete')) {
        wbx.grid.deleteOneRow(wbx.grid.getSelectedRowIndex());
      }
    }
    hide();
  }

  const init = (container, options) => {
    setConfig();
    dom.menu = render(container);
  };

  const show = (e, isColumn) => {
    state.isColumn = isColumn ? true : false;

    const gridX = wbx.grid.dom.wrapper.offsetLeft;
    const gridY = wbx.grid.dom.wrapper.offsetTop;

    const left = e.clientX - gridX + 2;
    const top = e.clientY - gridY + 2;

    console.log('x:', e.clientX - gridX, 'y:', e.clientY - gridY);
    // this.menu.style.display = 'block';
    dom.menu.style.top = top + 'px';
    dom.menu.style.left = left + 'px';
    dom.menu.style.display = 'block';
  };

  const hide = () => {
    dom.menu.style.display = 'none';
  }

  return {
    init: init,
    show: show,
    hide: hide
  };

})();
